<template>
  <div class="paper-list">
    <!-- 筛选 -->
    <div class="paper-filter">
      <el-form :inline="true"
               label-position="right"
               label-width="80px"
               size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="试卷名称">
              <el-input v-model="query.paper_name"
                        placeholder="请输入试卷名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属学科">
              <el-select v-model="query.subject_id"
                         placeholder="请选择学科"
                         clearable
                         @clear="get_list">
                <el-option v-for="item in treeList.data"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属目录">
              <el-select v-model="query.directory_id"
                         placeholder="请选择目录"
                         clearable>
                <el-option v-for="item in directoryList"
                           :key="item.id"
                           :label="item.name"
                           :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷状态">
              <el-select v-model="query.show_state"
                         placeholder="请选择试卷状态"
                         clearable>
                <el-option label="启用"
                           :value="1"></el-option>
                <el-option label="禁用"
                           :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷难度">
              <el-select v-model="query.difficulty"
                         placeholder="请选择难度"
                         clearable>
                <el-option label="简单"
                           :value="1"></el-option>
                <el-option label="中等"
                           :value="2"></el-option>
                <el-option label="较难"
                           :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷类型">

              <el-select v-model="query.paper_type"
                         placeholder="请选择试卷类型"
                         clearable>
                <el-option label="模拟卷"
                           :value="1"></el-option>
                <el-option label="真题卷"
                           :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker v-model="createTime"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始"
                              end-placeholder="结束"
                              align="right">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="query.create_name"
                        placeholder="请输入创建人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="3"
                  :offset="21">
            <el-button type="primary"
                       size="small"
                       @click="searchsubmit">查询</el-button>
            <el-button size="small"
                       @click="searchcancel">重置</el-button>
          </el-col>

        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table-bg">
      <el-table :data="list"
                border>
        <el-table-column prop="paper_name"
                         width="280px"
                         label="试卷名称"></el-table-column>
        <el-table-column prop="subject_name"
                         width="140px"
                         align="center"
                         label="学科名称"></el-table-column>
        <el-table-column prop="directory_name"
                         width="140px"
                         align="center"
                         label="目录名称"></el-table-column>
        <el-table-column prop="paper_type"
                         width="90px"
                         align="center"
                         label="试卷类型">
          <template slot-scope="scope">
            <span v-if=" scope.row.paper_type==1">模拟卷</span>
            <span v-if=" scope.row.paper_type==2">真题卷</span>
          </template>
        </el-table-column>
        <el-table-column prop="show_state"
                         align="center"
                         width="90px"
                         label="试卷状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.show_state"
                       @change="change_status(scope.row.id,$event)"
                       :active-value="1"
                       :inactive-value="2">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column width="90px"
                         align="center"
                         label="分数情况">
          <template slot-scope="scope">
            <span>{{ scope.row.pass_score}}/{{ scope.row.total_score}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty"
                         width="90px"
                         align="center"
                         label="试卷难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty==1">简单</span>
            <span v-if="scope.row.difficulty==2">中等</span>
            <span v-if="scope.row.difficulty==3">较难</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_name"
                         width="100px"
                         align="center"
                         label="创建人"></el-table-column>
        <el-table-column prop="created_at"
                         width="100px"
                         label="创建时间">
          <template slot-scope="scope">
            {{scope.row.created_at | formatTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-tooltip class="item"
                        effect="dark"
                        content="查看"
                        placement="top">
              <el-button size="small"
                         type="text"
                         @click="$emit('show',scope.row)"
                         icon="el-icon-view"></el-button>
            </el-tooltip>
            <el-tooltip class="item"
                        effect="dark"
                        content="修改"
                        placement="top">
              <el-button size="small"
                         type="text"
                         @click="$emit('edit',scope.row)"
                         icon="el-icon-edit"></el-button>
            </el-tooltip>
            <el-tooltip class="item"
                        effect="dark"
                        content="删除"
                        placement="top">
              <el-button size="small"
                         type="text"
                         @click="delHandler(scope.row)"
                         icon="el-icon-delete"></el-button>
            </el-tooltip>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <el-Pagination :total="total"
                :page.sync="page"
                :limit.sync="limit"
                @current-change="pagination_change" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getPaperList, deletePaper, changePaperStatus } from '@/api/paper'
const defaultItem = {
  subject_id: '',
  directory_id: '',
  paper_name: '',
  difficulty: '',
  show_state: '',
  paper_type: '',
  create_name: '',
}
export default {
  name: 'PaperList',
  data() {
    return {
      time: [],
      query: { ...defaultItem },
      page:1,
      list:[],
      limit:10,
      total:100,
      createTime: [],
    }
  },
  computed: {
    ...mapGetters({
      treeList: 'subject/treeList'
    }),
    directoryList() { // 目录信息
      if (!this.query.subject_id) {
        return []
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.query.directory_id = ''
        const result = this.treeList.data.find(val => val.id == this.query.subject_id)
        return result.children
      }
    },
    getCreateTime() {
      if (this.createTime.length) {
        console.log(this.createTime);

     return this.createTime= this.createTime.join(',')
        
      } else {
        return "";
      }
    },
  },
  created() {
    !this.treeList.length && this.loadTreeList()
     this.get_list()
  },
  methods: {
    ...mapActions({
      loadTreeList: 'subject/loadTreeList'
    }),
    pagination_change(newPage){
      this.page=newPage
      this.get_list()
     window.scroll(0,0)
    },
    async get_list() {
      try {
       const {data} = await getPaperList({
          page:this.page, limit:this.limit,...this.query, create_time:this.getCreateTime,
        })
       console.log(data);
        this.list=data.list

         this.total = data.total
         this.loading = false
      } catch (error) {
        this.loading = false
        console.log(error)
      }
    },
    searchsubmit() {
      this.page = 1
      this.get_list()
    },
    searchcancel() {
      this.page = 1
      this.query = {
        ...defaultItem
      }
      this.createTime= []
      this.get_list()
    },
    // 删除按钮事件
    async delHandler(val) {
      // 下架 即可删除
      if (val.show_state == 1) return this.$message.warning('禁用情况下才可以删除')
      // 删除操作
      try {
        await this.$confirm('确定删除吗,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return this.$message.info('已取消')
      }
      await deletePaper(val.id)
      this.$message.success('删除成功')
      // 页码退1
      if (this.page * 1 !== 1 && this.list.length === 1) {
        this.page--
      }
      this.get_list()
    },
    // 修改状态
    async change_status(id, state) {
      await changePaperStatus(id, state) 
      this.$message.success('切换成功')
    }
  }
}
</script>

<style  scoped lang="scss">
.paper-filter{
  background-color: #fff;
  padding: 16px;
}
.el-date-editor--daterange{
  width: 200px;
}
</style>
